<%@include file="../context.jsp"%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stock Screener</title>

<%@include file="../common_imports.jsp"%>
<%@include file="../common_frontend_imports.jsp"%>


<script type="text/javascript">
	function initDatePickers() {
		$(".datepicker").datepicker({
			dateFormat : "${jsDateFormat}"
		});
	}

	$(document).ready(function() {

		var table = $("#divi_grid");

		// init datepickers
		initDatePickers();

		initGrids(table);

		initSearch(table);
	});

	function initSearch(table) {
		$("#searchBtn").on("click", function() {
			search(table);
		});
	}

	function search(table) {
		var postData = table.jqGrid('getGridParam', 'postData');
		var result = parseArray($("#filterForm").serializeArray());
		jQuery.extend(postData, result);

		table.setGridParam({
			datatype : 'json',
			postData : postData
		});
		table.trigger('reloadGrid');
	}

	function initGrids(table) {
		var colNames, colModel;
		$.ajax({
			url : "/StockScreener/dividendhistory/colData",
			type : "GET",
			contentType : "application/json; charset=utf-8",
			data : {},
			dataType : "json",
			success : function(data, st) {
				if (st == "success") {
					colNames = data.colNames;//jqgrid heading data
					colModel = data.colModel; // its column model
					createGrid(table);
				}
			},
			error : function() {
				alert("Error with AJAX callback");
			}
		});

		function createGrid(table) {
			var queryString = $("#filterForm").serialize();

			table.jqGrid({
				url : "/StockScreener/dividendhistory/list",
				datatype : "json",
				mtype : 'POST',
				height : 300,
				autowidth : true,
				viewrecords : true,
				colNames : colNames,
				colModel : colModel,
				caption : "Stock Screener",
				jsonReader : {
					root : "data",
					page : "page",
					total : "total",
					records : "records"
				},
				pager : '#gridpager',
				rowNum : 10,
				rownumbers : true,
				refresh : true,
			});

		}
	}
</script>
</head>
<body>
	<div class="main_wrapper">
		<div class="container-fluid">
			<div class="row-fluid">
				<%@include file="../stockscreener/header.jsp"%>
			</div>
			<div class="row-fluid">
				<div class="main_menu_wrapper span12">
					<div class="navbar">
						<div class="navbar-inner">
							<div class="container">
								<button class="btn btn-navbar collapsed"
									data-target=".nav-collapse" data-toggle="collapse"
									type="button">
									<div class="icon_wrapper"
										style="float: right; padding: 5px 10px;">
										<span class="icon-bar"></span> <span class="icon-bar"></span>
										<span class="icon-bar"></span>
									</div>
								</button>

								<div class="nav-collapse collapse">
									<%@include file="../header_link.jsp"%>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<form:form class="form-horizontal" id="filterForm" method="POST"
				commandName="criteria"
				action="${pageContext.request.contextPath}/dividendhistory/list.html">
				<div class="input_top_box_wrapper">
					<div class="row-fluid">
						<div class="controls">
							<form:input path="fromDate" id="fromDatepicker"
								class="datepicker" />
							<form:input path="toDate" id="toDatepicker" class="datepicker" />
							<form:select cssClass="searchSelector" path="companyId">
								<form:option value="-1">--ANY--</form:option>
								<form:options itemValue="id" itemLabel="name"
									items="${companyMap}" />
							</form:select>
							<input id="searchBtn" class="btnSerch btn-info" value="Search"
								type="button" />
						</div>
					</div>
				</div>
				<div class="table_02">
					<div class="row-fluid">
						<div class="row-fluid">
							<div id="dataTabs">
								<div class="table_body">
									<table id="divi_grid"></table>
									<div id="gridpager"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</form:form>
			<div class="footer_wrapper">
				<%@include file="../footer.jsp"%>
			</div>


		</div>
	</div>


</body>
</html>